<template>
<div id="login">
    <header-tab :title="'登录'" />
    <footer-tab/>
    <div class="login_body">
        <div><input v-model="username" class="login_text" type="text" placeHolder="账户名/Email" @input="handleUserTrim"/></div>
        <div><input v-model="password" class="login_text" type="password" placeHolder="请输入您的密码" @input="handlePwdTrim" /></div>
        <div class="login_btn"><input type="submit" value="登录" @touchstart="handleToLogin" /></div>
        <div class="login_link">
            <router-link to="/mine/register">立即注册</router-link>
            <!-- <router-link to="/mine">找回密码</router-link> -->
        </div>
    </div>
</div>
</template>

<script>
import HeaderTab from "../HeaderTab"
import FooterTab from "../FooterTab"
export default {
    name: "login",
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        // 不允许输入空格
        handleUserTrim(e) {
            this.username = e.target.value.trim()
        },
        handlePwdTrim(e) {
            this.password = e.target.value.trim()
        },

        // 登录
        handleToLogin() {
            // 去除前后空格
            if(this.username === '' || this.password === '') {
                this.password = ""
                alert("用户名或密码不能为空")
                return;
            }
            this.axios.post("/user/login", {
                username: this.username,
                password: this.password,
            }).then(res => {
                // console.log(res.data);
                if(res.data.status === 200) {
                    alert(res.data.code)
                    localStorage.setItem("token", res.data.token)
                    this.$router.push("/mine/center")
                } else if(res.data.status === 400) {
                    alert(res.data.code)
                    this.password = ""
                }
            })
        }
    },
    components: {
        HeaderTab,
        FooterTab
    }
}
</script>

<style scoped>
#login {
	max-width: 768px;
	height: 100%;
	margin: 0 auto;
}
#login .login_body{ width:100%;margin-top: 10px;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 1em;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link router-link{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>